<template>
  <div class="step_05">
    <el-button @click="rect1" size="mini" type="primary" plain>矩形1</el-button>
    <el-button @click="demo1" size="mini" type="primary" plain
      >先创建矩形象</el-button
    >
    <el-button @click="demo1_2" size="mini" type="primary" plain
      >再创建矩形</el-button
    >
    <el-button @click="demo2" size="mini" type="primary" plain
      >先创建边对象</el-button
    >
    <el-button @click="demo2_2" size="mini" type="primary" plain
      >再创建边</el-button
    >
    <el-button @click="toJSON" size="mini" type="primary" plain
      >toJSON</el-button
    >
    <div id="container"></div>
  </div>
</template>
<script>
import { Graph, Shape, Node, ObjectExt } from "@antv/x6";
let rect0 = null;
let rect = null;
let edge = null;
export default {
  data() {
    return {
      graph: null,
      curCel: null,
      data: {},
    };
  },
  methods: {
    toJSON() {
      console.log(this.graph.toJSON());
    },
    rect1() {
      rect0 = new Shape.Rect({
        x: 100,
        y: 200,
        width: 80,
        height: 40,
        angle: 30,
        attrs: {
          body: {
            fill: "blue",
          },
          label: {
            text: "Hello",
            fill: "white",
          },
        },
      });
      this.graph.addNode(rect0);
    },
    demo1() {
      rect = new Shape.Rect();
      this.graph.addNode(rect);
    },
    demo1_2() {
      rect
        // 设置节点位置
        .position(100, 200)
        // 设置节点大小
        .resize(80, 40)
        // 旋转节点
        .rotate(30)
        // 设置节点样式
        .attr({
          body: {
            fill: "blue",
          },
          label: {
            text: "Hello",
            fill: "white",
          },
        });
    },
    demo2() {
      edge = new Shape.Edge();
      //   {
      //   source: "node1",
      //   target: "node2",
      // }
      this.graph.addEdge(edge);
    },
    demo2_2() {
      // 这种方式 不支持直接指定id

      // edge.setSource({ x: 50, y: 60 }).setTarget({ x: 100, y: 120 });
      edge.setSource(rect).setTarget(rect0);
    },
  },
  mounted() {
    this.graph = new Graph({
      container: document.querySelector("#container"),
      width: 1000,
      height: 500,
      grid: true,
    });
    this.graph.fromJSON(this.data);
  },
};
</script>
<style scoped>
</style>